
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

<style type="text/css">
    body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}
    #ltian,.rin{width:98%; margin:5px auto;}
    #ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}
    #ct{margin-right:111px; height:50%;overflow-y:auto;overflow-x: hidden;}
    #us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:50%; background-color:#F1F1F1;}
    #us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
    #us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}
    #us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}
    button{float:right; width:80px; height:35px; font-size:18px;}
    input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}
    .rin p{margin-right:160px;}
    .rin span{float:right; padding:6px 5px 0px 5px; position:relative;}
    .rin span img{margin:0px 3px; cursor:pointer;}
    .rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}
    .rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}

    #ct p{padding:5px; line-height:20px;}
    #ct a{color:#069; cursor:pointer;}
    #ct span{color:#999; margin-right:10px;}
    .c2{color:#999;}
    .c3{background-color:#DBE9EC; padding:5px;}
    .qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}
    #ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;}
    #ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;}
    #ems img:hover,#ems img:active{border-color:#A4B7E3;}
    #ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;}
    #ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;}
    .tc{text-align:center; margin-top:5px;}
</style>
<div>
    <button onclick="out()">
        退出聊天
    </button>
</div>
<div id="ltian">
    <div id="us" class="jb">
        <input type="hidden" id="curr_user_id" value="{$Think.session.user}">
        <select style="margin-bottom:8px"  name="userid" id="userid">
            <option value="all">所有人()</option>
            {foreach $user_list as $v}
            <option value="{$v.id}" >{$v.user_name}</option>
            {/foreach}
        </select>
    </div>
    <div id="ct"></div>
</div>
<div class="rin">
    <button id="sd">发送</button>

    <span>
       </span>
    <p><input id="nrong"></p>

</div>
<div id="ems"><p></p><p class="tc"></p></div>
<input type="text" id='dd'>
<!-- <button id='but'> 点我</button> -->
<script src="/static/layui/layui.js"></script>
<script src="/static/layui/lay/modules/jquery.js"></script>
<script>
    var ws='';
    window.onload=function(){
        ws = new WebSocket('ws://tp5.com:2346');
        ws.onopen=function (){
            var curr_user_id = document.getElementById("curr_user_id").value;
            console.log("websocket服务器已经连接:" + "type=getUsers"+"&curr_user_id="+curr_user_id);
            ws.send("type=getUsers"+"&curr_user_id="+curr_user_id);
        }
        ws.onconnect=function (e){
            //console.log(e);
        }
        ws.onmessage=function(e){

            console.log(e.data);
            if(e.data.match(/users:/i)){
                var s = e.data.replace(/users:/,'');
            }else if(e.data.match(/message:/i)){
                var s = e.data.replace(/message:/,'');
                var msg = s.replace(/,id/,'');
                arr=msg.split(':');
                //console.log(arr);
                //将服务器发送的用户消息展示到页面
                var p = document.createElement("p");
                var p1 = document.createElement("p");
                p1.innerHTML = "<p>"+arr[0]+"</p>";
                p.innerHTML = "<p>"+arr[1]+"</p>";
                document.getElementById("ct").appendChild(p1);
                document.getElementById("ct").appendChild(p);
            }
        }
    }
    layui.jquery("#sd").click(function(){

        //当前用户id
        var curr_user_id = document.getElementById("curr_user_id").value;
        var  msg=document.getElementById('nrong').value;
        //接收信息的用户id
        console.log(document.getElementById("userid").value);
        var to_user_id=document.getElementById("userid").value;

        var type = to_user_id == "all" ? "send_msg_to_all":"send_msg_to_one";
        ws.send("msg="+msg+"&to_user_id="+to_user_id+"&type="+type+"&name="+name+"&curr_user_id="+curr_user_id);
    })

    function out(){
        var curr_user_id = document.getElementById("curr_user_id").value;
        ws.send('type=logout&curr_user_id='+curr_user_id);
        location.href ="/admin/index/index";
    }
</script>
